import 'package:auto_route/auto_route.dart';
import 'package:distribution_mall_flutter/dialog/two_result_hint_dialog.dart';
import 'package:distribution_mall_flutter/generated/l10n.dart';
import 'package:distribution_mall_flutter/pages/user/delete_account/delete_account_verify/applicaion/delete_account_verify_service.dart';
import 'package:distribution_mall_flutter/provider/delete_account/delete_account_verify.dart';
import 'package:distribution_mall_flutter/utils/common_widget.dart';
import 'package:distribution_mall_flutter/utils/debug.dart';
import 'package:distribution_mall_flutter/widgets/pin_code.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

@RoutePage()
class DeleteAccountVerifyPage extends StatefulHookConsumerWidget {
  final bool isPhone;
  final String accountType;
  final String accountName;

  const DeleteAccountVerifyPage({
    super.key,
    @pathParam required this.isPhone,
    @pathParam required this.accountType,
    @pathParam required this.accountName,
  });

  @override
  ConsumerState createState() => _DeleteAccountVerifyPageState();
}

class _DeleteAccountVerifyPageState
    extends ConsumerState<DeleteAccountVerifyPage> {
  int downTime = 0;

  @override
  Widget build(BuildContext context) {
    ref.watch(
        deleteAccountVerifyServiceProvider(widget.isPhone, widget.accountName));
    return Scaffold(
      appBar: AppBar(
        title: Text('Verify by ${widget.accountName}'),
        leading: CommonBtnWidget.arrowBack(),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Divider(
            height: 1,
          ),
          Container(
            margin: EdgeInsets.only(top: 74, bottom: 8, left: 24, right: 24),
            child: const Text(
              'Enter the code',
              style: TextStyle(
                  fontSize: 20,
                  color: Color(0xFF000000),
                  fontWeight: FontWeight.w600),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 24, right: 24),
            child: const Text(
              'Enter the 6-digit code sent to:',
              style: TextStyle(
                fontSize: 16,
                color: Color(0xFF000000),
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(bottom: 24, left: 24, right: 24),
            child: Text(
              widget.accountName,
              style: const TextStyle(
                fontSize: 16,
                color: Color(0xFF2477FF),
              ),
            ),
          ),
          Container(
            height: 65,
            child: Consumer(builder: (_, ref, __) {
              var deleteAccountSendCodeState =
                  ref.watch(deleteAccountSendCodeProvider);
              println(
                  'deleteAccountSendCodeState ${deleteAccountSendCodeState.codeResponse}');
              if (deleteAccountSendCodeState.codeResponse == null) {
                return Container();
              }
              return Container(
                margin: const EdgeInsets.only(
                  left: 50,
                  right: 50,
                ),
                child: PinCode(
                  autoFocus: true,
                  length: deleteAccountSendCodeState.codeResponse!.codeLength,
                  onCompleted: (v) async {
                    bool? result = await showDialog(
                        context: context,
                        builder: (_) => const TwoResultHintDialog(
                            title:
                                'As a final notification, please note that account deletion is irreversible.'));
                    if (result == true) {
                      ref
                          .read(deleteAccountVerifyProvider.notifier)
                          .getTemporaryToken(widget.accountType,
                              widget.accountName, widget.isPhone, v);
                    }
                  },
                ),
              );
            }),
          ),
          Container(
            margin: const EdgeInsets.only(left: 24, right: 24, top: 23),
            height: 20,
            child: Consumer(builder: (context, ref, _) {
              Widget child = Container();
              var deleteAccountSendCodeState =
                  ref.watch(deleteAccountSendCodeProvider);
              if (deleteAccountSendCodeState.type == SendCodeState.Default ||
                  deleteAccountSendCodeState.type ==
                      SendCodeState.CountDownEnd) {
                child = const Text(
                  'Send',
                  style: TextStyle(
                      color: Color.fromRGBO(84, 131, 191, 1), fontSize: 14),
                );
              } else if (deleteAccountSendCodeState.type ==
                  SendCodeState.CountingDown) {
                child = RichText(
                    text: TextSpan(
                        style: const TextStyle(
                            color: Color.fromRGBO(134, 141, 150, 1),
                            fontSize: 14),
                        children: [
                      TextSpan(
                        text: '${S.current.user_login_time} ',
                      ),
                      TextSpan(
                          text: '${deleteAccountSendCodeState.countDown}',
                          style: const TextStyle(
                              color: Color.fromRGBO(84, 131, 191, 1),
                              fontSize: 14)),
                      TextSpan(
                        text: ' ${S.current.user_login_s}',
                      )
                    ]));
              }
              return GestureDetector(
                onTap: () {
                  ref
                      .read(deleteAccountSendCodeProvider.notifier)
                      .sendSmsCode(widget.isPhone, widget.accountName);
                },
                child: child,
              );
            }),
          ),
          Container(
              width: double.infinity,
              height: 48,
              margin: const EdgeInsets.only(left: 21, right: 21, top: 48),
              child: ElevatedButton(
                child: Text('Verify Code'),
                onPressed: () {},
              ))
        ],
      ),
    );
  }
}

class NoticeItem extends StatelessWidget {
  final String text;

  const NoticeItem({
    super.key,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: const EdgeInsets.only(right: 16, top: 5),
                width: 10,
                height: 10,
                decoration: const BoxDecoration(
                    color: Color(0xFFF79F31), shape: BoxShape.circle),
              ),
              Expanded(
                  child: Text(
                text,
                style: const TextStyle(fontSize: 14, color: Color(0xFF303030)),
              ))
            ],
          )
        ],
      ),
    );
  }
}
